<template lang="html">
  <div class="app f6bg pb" :class='{pbReduce:isPb}'>
    <lawyer-bar />
    <lawyer-header isBorder='isBorder'/>
    <div class="contract">
      <div class="w1200 consult-con">
        <div class="left-con fl">
          <div class="list">
            <div class="left fl">
              问题<br>描述
            </div>
            <div class="right fr text-con">
              <textarea id="text" placeholder="为了律师更好判断和分析问题，内容建议不少于 50 个字！" @input='input()'></textarea>
              <div class="num">
                {{num}}/1000
              </div>
            </div>
          </div>
          <div class="list">
            <div class="left fl">
              标题
            </div>
            <div class="right fr">
              <input type="text" class="title">
            </div>
          </div>
          <div class="address overhide">
            <div class="address-list fl">
              <div class="left fl">
                省份
              </div>
              <div class="right fr">
                <label id="province">
                  {{province}}
                  <i class="el-icon-arrow-down"></i>
                </label>
                <select class="" v-model="province">
                  <option>浙江</option>
                  <option>江苏</option>
                </select>
              </div>
            </div>
            <div class="address-list fl">
              <div class="left fl">
                城市
              </div>
              <div class="right fr">
                <label id="city">
                  {{city}}
                  <i class="el-icon-arrow-down"></i>
                </label>
                <select class="" v-model="city">
                  <option>杭州</option>
                  <option>南京</option>
                </select>
              </div>
            </div>
            <div class="address-list fl">
              <div class="left fl">
                区域
              </div>
              <div class="right fr">
                <label id="area">
                  {{area}}
                  <i class="el-icon-arrow-down"></i>
                </label>
                <select class="" v-model="area">
                  <option>滨江区</option>
                  <option>玄武区</option>
                </select>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="left fl">
              联系人
            </div>
            <div class="right fr">
              <input type="text" class="title tel">
            </div>
          </div>
          <div class="list">
            <div class="left fl">
              服务
            </div>
            <div class="right fr t5">
              <div class="hook no-double" @click='hook_show()'><i class="el-icon-check" v-if='hookshow'></i></div>
              律师回复后短信通知我 <span>(需绑定手机)</span>
            </div>
          </div>
          <div class="submit">提交</div>
        </div>
        <div class="right-con fr">
          <div class="title">
            <span></span>&nbsp; 解忧小二温馨提示 &nbsp;<span></span>
          </div>
          <div class="info">
            <p>完整的叙述，会得到律师更详细的建议指导哦~我们建议您提交的问题围绕以下方面：</p>
            <p class="color" style="margin-top:10px;">1、问题描述</p>
            <p class="color">2、目前的困惑</p>
            <p class="color">3、您希望得到的帮助</p>
            <p class="black">【问题举例】</p>
            <p>与对方公司已经签订业务合同，对方一直没有按照合同约定时间付款，现在对方提出修改合同条款，但是我方不清楚修改合同条款后对原有合同约定时间付款的时间是否还有效。我想问该怎么办？</p>
            <p class="tit">标题：签订业务合同后，对方要求修改合同条款</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import lawyerHeader from '../header/lawyer-header.vue'
import lawyerBar from '../header/topbar.vue'
export default {
  data(){
    return{
      province:'',city:'',area:'',hookshow:1,bol:true,num:0,
      isPb:false,isBorder:true
    }
  },
  methods:{
    hook_show:function(){
      if(this.bol){
        this.hookshow=0;
      }else{
        this.hookshow=1;
      }
      this.bol=!this.bol;
    },
    input:function(){
      let strLen=document.getElementById('text').value;
      // console.log(str.length);
      this.num=strLen.length
    },
    // 顶部变化
    headerReduce:function(){
      var top=document.body.scrollTop;
      if(top>0){
        this.isPb=true
      }else{
        this.isPb=false
      }
    }
  },
  mounted(){
    window.addEventListener('scroll',this.headerReduce)
  },
  activated(){
    document.title='名人堂-在线咨询'
  },
  components:{
    lawyerHeader,lawyerBar
  }
}
</script>

<style lang="less">
@import "../contract/contract.less";
</style>
